<script setup lang="ts" name="GoodsSku">
import useStore from '@/store'
import { GoodsInfo, Spec, SpecValue } from '@/types/good'
import { onBeforeUnmount } from 'vue'
import { getPathMap, getSelectedSpec, updateDisabledStatus, initDefaultSelected } from '@/utils/sku'
const store = useStore()
const props = defineProps<{
  goods: GoodsInfo
  skuId?: string
}>()
const emits = defineEmits<{
  (e: 'changeSku', skuId: string): void
}>()
const spliter = '🤣'
// #2
const changeSku = (btnObj: SpecValue, spec: Spec) => {
  // 如果按钮被禁用了,就不让选择
  if (btnObj.disabled) return
  if (btnObj.selected) {
    // 已选中就取消选中
    btnObj.selected = false
  } else {
    // 没选中先把当前行中的其他按钮取消选中
    spec.values.forEach((btnObj) => (btnObj.selected = false))
    // 再选中当前的
    btnObj.selected = true
  }
  // 每次点击打印看一下能不能获取原来选中的按钮的 name
  // console.log(getSelectedSpec(props.goods.specs))
  updateDisabledStatus(props.goods.specs, pathMap)
  // 需求：把选择到的 skuId 传到父组件
  // 父组件接收 skuId，根据 skuId 找到 sku，更新价格和库存
  const selectedBtn = getSelectedSpec(props.goods.specs).filter((v) => v)
  if (selectedBtn.length === props.goods.specs.length) {
    // 转成数组当做 key 组字典中找 skuId
    const key = selectedBtn.join(spliter)
    const skuId = pathMap[key][0]
    emits('changeSku', skuId)
  }else {
    // 没有选中 传递空
    emits('changeSku','')
  }
}
const pathMap = getPathMap(props.goods.skus)
// 一上来就检测每一个按钮在不在字典中，在就启用，不在就禁用
updateDisabledStatus(props.goods.specs, pathMap)
onBeforeUnmount(() => {
  store.goods.resetGoodsInfo()
})
initDefaultSelected(props.goods, props.skuId)
</script>

<template>
  <div class="goods-sku">
    <!-- {{ ++i }} -->
    <!-- 每一行 -->
    <dl v-for="spec in goods.specs" :key="spec.name">
      <dt>{{ spec.name }}</dt>
      <dd>
        <!-- 每一行中的每一个按钮 -->
        <template v-for="btnObj in spec.values" :key="btnObj.name">
          <!-- #1 绑定事件 -->
          <!-- #3 把 bntObj.selected 作用于 selected class -->
          <img
            v-if="btnObj.picture"
            :src="btnObj.picture"
            alt=""
            @click="changeSku(btnObj, spec)"
            :class="{
              selected: btnObj.selected,
              disabled: btnObj.disabled,
            }"
          />
          <span
            v-else
            @click="changeSku(btnObj, spec)"
            :class="{
              selected: btnObj.selected,
              disabled: btnObj.disabled,
            }"
            >{{ btnObj.name }}</span
          >
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
